<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			* {
				margin: 0;
				padding: 0
			}

			body {
				height: 100vh;
			}
            .container{
				width: 500px;
				height: 500px;
				position: relative;
				background: #0000FF;
			}
			.box {
				position: absolute;
				top: 100px;
				left: 100px;
			}

			/*四边*/
			.box .t,
			.box .b,
			.box .l,
			.box .r {
				position: absolute;
				z-index: 1;
				background: #666;
			}

			.box .l,
			.box .r {
				width: 10px;
				height: 100%;
				cursor: col-resize;
			}

			.box .t,
			.box .b {
				width: 100%;
				height: 10px;
				cursor: row-resize;
			}

			.box .t {
				top: 0;
			}

			.box .b {
				bottom: 0;
			}

			.box .l {
				left: 0;
			}

			.box .r {
				right: 0;
			}

			/*四角*/
			.box .tl,
			.box .bl,
			.box .br,
			.box .tr {
				width: 20px;
				height: 20px;
				position: absolute;
				background: #CCC;
				z-index: 2;
				cursor: nwse-resize
			}

			.box .tl,
			.box .bl {
				left: -5px;
			}

			.box .tr,
			.box .br {
				right: -5px;
			}

			.box .br,
			.box .bl {
				bottom: -5px;
			}

			.box .tl,
			.box .tr {
				top: -5px;
			}

			.box .tr,
			.box .bl {
				cursor: nesw-resize;
			}

			/*图片*/
			img {
				width: 100%;
				height: 100%;
				cursor: move;
			}
		</style>
		<script>
			window.onload = function() {
				//var oDiv = document.getElementsByTagName('div')[0];
				var oDiv = document.getElementById("box");
				oDiv.style.width = '200px';
				var aSpan = oDiv.getElementsByTagName('span');
				// 遍历为每一个span添加上drage事件
				for (var i = 0; i < aSpan.length; i++) {
					dragFn(aSpan[i]);
				}

				function dragFn(obj) {
					// 按下鼠标的操作
					obj.onmousedown = function(ev) {
						var oEv = ev || event;
						//   阻止事件的冒泡
						oEv.stopPropagation();
						// 获取移动前盒子的宽高，边角的鼠标坐标，和距离浏览器边界的距离
						var oldWidth = oDiv.offsetWidth;
						var oldHeight = oDiv.offsetHeight;
						var oldX = oEv.clientX;
						var oldY = oEv.clientY;
						var oldLeft = oDiv.offsetLeft;
						var oldTop = oDiv.offsetTop;
						// 鼠标移动事件
						document.onmousemove = function(ev) {
							var oEv = ev || event;
							// t top  l  left  r right  b bottom， 依次 tl 上左角
							if (obj.className == 'tl') { //                 代表的横向移动的距离，右为正，左为负
								// 计算移动后盒子的宽 = 移动前盒子的宽度 - （移动后的横向坐标-移动前的横向坐标）
								oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
								// 高度同理
								oDiv.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
								// 同理计算修改盒子的定位，这里很多人就不理解了，我明明动的角，为嘛不是修改span
								// 我给你捋一捋，首先角和边是相对于父元素定位的，父元素也是一个绝对定位，这个时候
								//我动态修改父元素的定位，父元素的位置就好跟着改变，那么子元素是相对父元素定位的，
								// 那么在父元素最左边，不还是在最左边，这样就简单的实现了让所有定位元素跟着动
								oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
								oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';
							} else if (obj.className == 'bl') {
								oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
								oDiv.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
								oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
								oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
							} else if (obj.className == 'tr') {
								oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
								oDiv.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
								oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
								oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';
							} else if (obj.className == 'br') {
								oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
								oDiv.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
								oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
								oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
							} else if (obj.className == 't') {
								oDiv.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
								oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';
							} else if (obj.className == 'b') {
								oDiv.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
								oDiv.style.bottom = oldTop - (oEv.clientY + oldY) + 'px';
							} else if (obj.className == 'l') {
								oDiv.style.height = oldHeight + 'px';
								oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
								oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
							} else if (obj.className == 'r') {
								oDiv.style.height = oldHeight + 'px';
								oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
								oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
							}
							// 边界判断
							boundary()
						};
						// 松开鼠标时，移除移动的监听
						document.onmouseup = function() {
							document.onmousemove = null;
							document.onmouseup = null;
						};
						// 阻止默认事件
						return false;
					};
				}
				// 给盒子添加移动事件 就是简单的移动盒子
				oDiv.onmousedown = function(ev) {
					var oevent = ev || event;
					// 阻止默认事件
					oevent.preventDefault();
					// 阻止事件冒泡
					oevent.stopPropagation();
					var distanceX = oevent.clientX - oDiv.offsetLeft;
					var distanceY = oevent.clientY - oDiv.offsetTop;

					document.onmousemove = function(ev) {
						var oevent = ev || event;
						oDiv.style.left = oevent.clientX - distanceX + 'px';
						oDiv.style.top = oevent.clientY - distanceY + 'px';
						boundary()


					};
					document.onmouseup = function() {
						document.onmousemove = null;
						document.onmouseup = null;

					};
				}
				// 边界判断事件
				function boundary() {
					let oDivWidth = oDiv.offsetWidth;
					let oDivHeight = oDiv.offsetHeight;
					let oDivLeft = oDiv.offsetLeft;
					let oDivTop = oDiv.offsetTop;
					let bodyWidth = document.body.clientWidth
					let bodyHeight = document.body.clientHeight
					console.log(oDivLeft, oDivWidth, bodyWidth);

					// 左边界
					if (oDivLeft <= 0) {
						oDiv.style.left = 0 + 'px'
					}
					// 右边界 多减5个像素减去的是防止滚动条会造成抖动
					if ((oDivLeft + oDivWidth) >= (bodyWidth - 5)) {
						oDiv.style.left = bodyWidth - oDivWidth - 5 + 'px'
					}
					//上边界
					if (oDivTop <= 0) {
						oDiv.style.top = 0 + 'px'
					}
					// 下边界 多减5个像素减去的是防止滚动条会造成抖动
					if (oDivTop + oDivHeight >= bodyHeight - 5) {

						oDiv.style.top = bodyHeight - oDivHeight - 5 + 'px'
					}
				}

			};
		</script>
	</head>

	<body>
		<div class="container">
			<div id="box" class="box">
				<span class="r"></span>
				<span class="l"></span>
				<span class="t"></span>
				<span class="b"></span>
				<span class="br"></span>
				<span class="bl"></span>
				<span class="tr"></span>
				<span class="tl"></span>
				<img src="http://img.zhumengapp.com/group1/M00/00/AB/rBLFZl02g4OAGr2EAASRwwPR8DQ852.jpg">
			</div>
		</div>
	</body>
</html>
